import A from "./A";
import B from "./B";
import C from "./C";
import D from "./D";
import Com from './Component'
import { useState } from "react";
const App = function () {
  const [Component, setComponent] = useState({
    is: A,
  });
  //组件的挂载集合
  const list = [A,B,C,D]
  return (
    <div>
      {/* 选项卡头 */}
      {[A, B, C, D].map((item) => {
        return (
          <button
            key={item.name}
            style={{ padding: "5px", margin: "5px" }}
            onClick={() => setComponent({ is: item })}
          >
            {item.name}
          </button>
        );
      })}
      {/* 选项卡 */}
      <Com list={list} is={Component.is}></Com>
      {/* <Component.is></Component.is> */}
    </div>
  );
};

export default App;
